<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv ="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>场景配置</title>
    <link rel="stylesheet" href="css/reset.css">
    <!--页面公共样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--页面样式-->
    <link rel="stylesheet" href="css/page.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <!--使es6兼容ie-->
    <script src = "js/polyfill.min.js"></script>
    <!--使es6兼容ie-->
    <!--jquery等插件必须放head，后续js需要使用-->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.pagination.min.js"></script>
    <script src="js/rollSlide.js"></script>
    <!--使滑动翻滚菜单支持ie9-->
    <!--[if IE]>
    <link rel="stylesheet" href="css/ie9.css">
    <![endif]-->
    <script src="js/txtscroll.js"></script>
    <!--页面js必须放head里，防止页面抖动-->
    <script src="js/common.js"></script>
    <script src="js/top.js"></script>
    <script src="js/envConfig.js"></script>
</head>
<body>


<!--引入top.php-->

<main class="online-class-page system-config-page">
        <!--切换菜单区-->
        <section class="menu">
            <div class="menu-content">
                <ul>
                    <li><a href="####">系统配置</a></li>
                    <li><a href="####" class="active">场景配置</a></li>
                </ul>
            </div>
        </section>
        <!--切换菜单区结束-->
        <div>
            <div class="stepPage">
                <!--场景配置页内容区-->
                <section class="stepPageContent">

                    <div class="top-setting row">
                        <div class="setting-left">
                            <ul class="active-status-selected">
                                <li class="line-off">已上传</li>
                                <li class="waiting">未上传</li>
                                <li class="status-error">状态异常，服务器与本地不匹配</li>
                            </ul>
                        </div>
                        <div class="setting-right">
                            <div class="pagination" id="Pagination">
                            </div>
                        </div>
                    </div>

                    <div class="mode-list">
                        <!--已上传模式,index为该条模式的id值-->
                        <div class="mode-item uploaded-status">
                            <div class="mode-img">
                                <img src="images/bac/mode1.png" alt="">
                            </div>
                            <div class="mode-title">
                                说课模式一
                            </div>
                            <div class="mode-change-btn" index="0">
                                <a href="####" class="active">主播模式</a>
                                <a href="####">教学模式</a>
                            </div>
                        </div>
                        <!--已上传模式-->
                        <div class="mode-item uploaded-status">
                            <div class="mode-img">
                                <img src="images/bac/picmode.png" alt="">
                            </div>
                            <div class="mode-title">
                                说课模式一
                            </div>
                            <div class="mode-change-btn">
                                <a href="####" class="active">主播模式</a>
                                <a href="####">教学模式</a>
                            </div>
                        </div>
                        <!--未上传模式-->
                        <div class="mode-item unuploaded-status">
                            <div class="mode-img">
                                <img src="images/bac/mode1.png" alt="">
                            </div>
                            <div class="mode-title">
                                说课模式一
                            </div>
                            <div class="mode-change-btn">
                                <a href="####" class="active">主播模式</a>
                                <a href="####">教学模式</a>
                            </div>
                        </div>

                        <!--状态异常模式-->
                        <div class="mode-item error-status">
                            <div class="mode-img">
                                <img src="images/bac/mode1.png" alt="">
                            </div>
                            <div class="mode-title">
                                说课模式一
                            </div>
                            <div class="mode-change-btn">
                                <a href="####" class="active">主播模式</a>
                                <a href="####">教学模式</a>
                            </div>
                        </div>

                        <!--已上传模式-->
                        <div class="mode-item uploaded-status">
                            <div class="mode-img">
                                <img src="images/bac/mode1.png" alt="">
                            </div>
                            <div class="mode-title">
                                说课模式一
                            </div>
                            <div class="mode-change-btn">
                                <a href="####" class="active">主播模式</a>
                                <a href="####">教学模式</a>
                            </div>
                        </div>
                        <!--已上传模式-->
                        <div class="mode-item uploaded-status">
                            <div class="mode-img">
                                <img src="images/bac/mode1.png" alt="">
                            </div>
                            <div class="mode-title">
                                说课模式一
                            </div>
                            <div class="mode-change-btn">
                                <a href="####" class="active">主播模式</a>
                                <a href="####">教学模式</a>
                            </div>
                        </div>
                        <!--未上传模式-->
                        <div class="mode-item unuploaded-status">
                            <div class="mode-img">
                                <img src="images/bac/mode1.png" alt="">
                            </div>
                            <div class="mode-title">
                                说课模式一
                            </div>
                            <div class="mode-change-btn">
                                <a href="####" class="active">主播模式</a>
                                <a href="####">教学模式</a>
                            </div>
                        </div>

                        <!--状态异常模式-->
                        <div class="mode-item error-status">
                            <div class="mode-img">
                                <img src="images/bac/mode1.png" alt="">
                            </div>
                            <div class="mode-title">
                                说课模式一
                            </div>
                            <div class="mode-change-btn">
                                <a href="####" class="active">主播模式</a>
                                <a href="####">教学模式</a>
                            </div>
                        </div>

                    </div>

                    <div class="step-button">
                        <button type="button" class="btn btn-default nextBtn" id="finshedBtn">
                            完成
                        </button>
                        <button type="button" class="btn btn-default exitBtn" id="exitBtn">
                            退出
                        </button>
                    </div>
                </section>

            </div>

        </div>

</main>

<!--引入right.php-->


</body>
</html>
